<template>
  <div>
    <el-row style="margin: -20px auto 10px auto;width: 100%;text-align: center;background-color: white;padding: 10px;">
      <el-col :span="4">查询方式:</el-col>
      <el-col :span="20">
        <el-button type="primary" @click="getTIme('01')">当日</el-button>
        <el-button type="primary" @click="getTIme('02')">本周</el-button>
        <el-button type="primary" @click="getTIme('03')">本月</el-button>
        <el-button type="primary" @click="diyTime=!diyTime">自定义</el-button>
      </el-col>

      <div v-show="diyTime" class="block" style="float: right;margin-top: -37px">
        <span class="demonstration"></span>
        <el-date-picker
          v-model="time"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeChange">
        </el-date-picker>
      </div>
      <!--<el-button type="primary" @click="query('04')">自定义</el-button>-->
    </el-row>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="title">成功播放总次数</div>
            <div style="margin: 0 auto;width: 60%">
              <el-col :xs="12" :sm="12" :lg="6" style="text-align: right">
                <svg-icon icon-class="play" class-name="card-panel-icon"/>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="18" style="text-align: left">
                <div class="number">
                  <count-to :start-val="0" :end-val="adData.playSuccess" :duration="1000" class="card-panel-num"/>
                  <span style="font-size: 16px">次</span></div>
                <div class="sub-title">成功率<span style="color: #00a0dc">&nbsp{{successRate}}%</span>&nbsp/&nbsp失败次数<span style="color: red">&nbsp{{adData.playFail}}&nbsp</span>次
                </div>
              </el-col>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="title">活跃媒体数量</div>
            <div style="margin: 0 auto;width: 60%">
              <el-col :xs="12" :sm="12" :lg="6">
                <svg-icon icon-class="media" class-name="card-panel-icon"/>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="18">
                <div class="number">
                  <count-to :start-val="0" :end-val="adData.active" :duration="1000" class="card-panel-num"/>
                  <span style="font-size: 16px">台</span></div>
                <div class="sub-title">本月总活跃媒体<span style="color: #00a0dc">&nbsp{{adData.monthActive}}&nbsp</span>台</div>
              </el-col>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="title">图片播放次数</div>
            <div style="margin: 0 auto;width: 60%">
              <el-col :xs="12" :sm="12" :lg="6">
                <svg-icon icon-class="tp" class-name="card-panel-icon"/>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="18">
                <div class="number">
                  <count-to :start-val="0" :end-val="adData.pic" :duration="1000" class="card-panel-num"/>
                  <span style="font-size: 16px">次</span></div>
              </el-col>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="title">视频播放次数</div>
            <div style="margin: 0 auto;width: 60%">
              <el-col :xs="12" :sm="12" :lg="6">
                <svg-icon icon-class="video" class-name="card-panel-icon"/>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="18">
                <div class="number">
                  <count-to :start-val="0" :end-val="adData.video" :duration="1000" class="card-panel-num"/>
                  <span style="font-size: 16px">次</span></div>
              </el-col>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="title">渠道广告播放次数</div>
            <div style="margin: 0 auto;width: 60%">
              <el-col :xs="12" :sm="12" :lg="6">
                <svg-icon icon-class="qudao" class-name="card-panel-icon"/>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="18">
                <div class="number">
                  <count-to :start-val="0" :end-val="adData.platformChannel" :duration="1000" class="card-panel-num"/>
                  <span style="font-size: 16px">次</span></div>
              </el-col>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="title">商户广告播放次数</div>
            <div style="margin: 0 auto;width: 60%">
              <el-col :xs="12" :sm="12" :lg="6">
                <svg-icon icon-class="shop" class-name="card-panel-icon"/>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="18">
                <div class="number">
                  <count-to :start-val="0" :end-val="adData.platformBusiness" :duration="1000" class="card-panel-num"/>
                  <span style="font-size: 16px">次</span></div>
              </el-col>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="24">
        <div class="card-panel" style="height: 100px;margin-bottom:50px;">
          <div class="card-panel-description">
            <div class="title">预计收益</div>
            <div style="margin: 0 auto;width: 100%;text-align: center">
              <div class="number" style="color: red;font-size: 20px">
                <svg-icon icon-class="money"/>
                <count-to :start-val="0.01" :end-val="income" :duration="3000" class="card-panel-num" :decimals="2"/>
                <span style="font-size: 16px">元</span></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import CountTo from 'vue-count-to'
  import {formatTime} from "@/utils/time";
  import {getAdDate, getAdTable} from "@/api/advertisement";

  export default {
    components: {
      CountTo
    },
    data() {
      return {
        time: '',
        diyTime: false,
        adData: {},
        startTime: formatTime(new Date(), 'yyyy-MM-dd'),
        endTime: formatTime(new Date(), 'yyyy-MM-dd')

      }
    },
    methods: {
      getTIme(type) {
        let date = new Date()
        if (type === '02') {
          let weekday = date.getDay() || 7;
          date.setDate(date.getDate() - weekday + 1);
          this.startTime = formatTime(date, 'yyyy-MM-dd')
        } else if (type === '03') {
          date.setDate(1)
          this.startTime = formatTime(date, 'yyyy-MM-dd')
        }
        this.query()
      },
      timeChange(val) {
        this.startTime = formatTime(val[0], 'yyyy-MM-dd')
        this.endTime = formatTime(val[1], 'yyyy-MM-dd')
        console.log(this.startTime)
        console.log(this.endTime)
      },
      query() {
        console.log(this.startTime)
        console.log(this.endTime)
        let queryTime = {"startTime": new Date(this.startTime).getTime(), "endTime": new Date(this.endTime).getTime()}
        getAdDate(queryTime).then(response => {
          this.adData = response.data.data.data
        })
        this.queryTable()
      },
      queryTable() {

        let queryTime = {"startTime": new Date(this.startTime).getTime(), "endTime": new Date(this.endTime).getTime()}
        getAdTable(queryTime).then(response => {
          this.adData = response.data.data.data
        })
      }
    },
    computed: {
      successRate: function () {
        return (100 - (this.adData.playFail * 100 / this.adData.playTotalCount).toFixed(2))
      },
      income: function () {
        return (this.adData.playSuccess / 100)
      }
    },
    mounted() {
      this.query()
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .panel-group {

    .card-panel-col {
      margin-bottom: 12px;
    }

    .card-panel {
      height: 130px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);


      .card-panel-icon {
        float: left;
        font-size: 48px;
        color: #00a0dc;
      }

      .card-panel-description {
        font-weight: bold;
        margin: 16px;
        margin-left: 0px;
        width: 100%;

        .title {
          font-size: 20px;
          text-align: center;
        }

        .number {
          font-size: 18px;
          color: #00a0dc;
        }

        .sub-title {
          font-size: 15px;
        }

        div {
          padding: 5px;
        }

      }
    }

    .card-panel:hover {
      cursor: pointer;
      box-shadow: 5px 6px rgba(0, 0, 0, 0.09);
      transform: translate(0, -2px);
    }
  }
</style>
